<template>
  <div class="body">
    <div class="contant">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <div class="xcbs_box" v-for="(v,index) of list" :keys="index" @click="btn(v)">
            <div class="xcbs_child">
              <img class="img_persons" v-if="v.patrolTroubleshootId>0||(v.patrolTroubleshootId==0&&v.noweInfoId>0)" src="../../assets/images/logo5.png" />
              <img class="img_persons" v-if="v.commitId>0" src="../../assets/images/rwls.png" />
              <div class="xcbs_suns">
                <div class="xcbs_tit">{{v.unitsName}}</div>
                <div class="xcbs_sun">
                   <img v-show="getStatus(v.isRectifica)=='黄灯'&&!(v.commitId>0)" class="yh_light" src="../../assets/images/jsd.gif" />
                  <img v-show="getStatus(v.isRectifica)=='勾'&&!(v.commitId>0)" class="yh_light" src="../../assets/images/lg.png" />
                  <img class="img_people" src="../../assets/images/people.png" />
                  <div>{{v.ptPerson}}</div>
                </div>
              </div>
            </div>
            <div class="time">{{v.niAddtime}}</div>
          </div>

        </van-list>
      <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>

<script>
  // import  Tabbar from '../../tabbar'
  export default {
    name: 'ybjc_list',
    data() {
      return {
        userId: null, //用户id
        list: [],
        where: '',
        leibielist: [], //方式
        loading: false, //加载状态结束false
        finished: false, //全部加载完成true
        error: false, //出错状态
        refreshing: false, //是否下拉加载 是true
        cunt: 1,
        yinchang: false,
        scroll: 0,
        total: null,
        src: '',
        dwId: "",
      }
    },
    components: {
      // Tabbar
    },
    methods: {
       getStatus(status) {
      var str = "";
      if (status || status === 0) {
        if (status === 1 || status === 3 || status === 6) {
          str = "勾";
        } else {
          str = "黄灯";
        }
      }
      return str;
    },
      toback() {
        this.$router.push("/index")
      },
      btn(v) {
        console.log(v)
        /*var jdjc_detail_params = {
          from: '/tongji_3',
          patrolTroubleshootId: v.patrolTroubleshootId,
          patrolTroubleshootInfoId: v.patrolTroubleshootInfoId
        };
        localStorage.setItem("jdjc_detail_params", JSON.stringify(jdjc_detail_params));
        this.$router.push("/jdjc_detail");*/

        sessionStorage.setItem("inspection_patrolTroubleshootId", v.patrolTroubleshootId);
        sessionStorage.setItem("inspection_infoId", (v.patrolTroubleshootInfoId||v.patrolTroubleshootInfoId===0)?v.patrolTroubleshootInfoId:'');
        localStorage.setItem("hard_detail_from",'/tongji_3');
        if (v.patrolTroubleshootId>0) {
          // this.$router.push("/hard_detail");
          // sessionStorage.setItem("inspection_patrolTroubleshootId", ptId);
          // sessionStorage.setItem("inspection_infoId", infoId);
          this.$router.push("/hard_detail");
        } else if (v.patrolTroubleshootId==0&&v.noweInfoId>0){
          this.$router.push({
            path: "/ptlook",
            query: { id: v.noweInfoId, ids: 14 },
          });
        }else if(v.patrolTroubleshootId==0&&v.noweInfoId==0){
           this.$router.push({
            path: "/jdjc_luoshi",
            query: { id: v.commitId },
          });
        }
      },
      getlist() {
        // try {
        //   plus.nativeUI.showWaiting("正在加载...");
        // } catch (e) {
        //   console.log(e.message);
        // }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planList?userId=${this.userId}&dwId=${this.dwId}&type=${2}&page=${this.cunt}&pageSize=10`, {
          headers: {
            "Content-Type": "application/json"
          }
        }).then(res => {
          console.log(res)
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
          if (res.data.rows.total == 0) {
            this.loading = false;
            this.$toast("暂无数据");
            this.finished = true;
            return false
          }
          for (var i of res.data.rows.list) {
            // this.list=res.data.rows.list
            this.list.push(i);
          }
          this.total = res.data.rows.total

          this.cunt += 1
          // 加载状态结束
          this.loading = false;
          console.log(this.list.length)
          if (this.total < this.list.length || this.total == this.list.length) {
            this.finished = true;
            console.log("加载完毕")
          }

        }).catch(err=>{
              this.$terminal._error(err)
          })
      },

      onLoad() {
        // 异步更新数据
        // this.yc = true
        if (this.refreshing) {
          this.list = [];
          this.cunt = 1
          this.refreshing = false;
        }
        // for (let i = 0; i < 20; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.getlist()


        // 出错
        // if (this.cunt >= 2) {
        //     this.error = true;
        // }
        // 数据全部加载完成
      },
      onRefresh() {
        console.log("下拉")
        // 清空列表数据
        this.finished = false;
        // this.yc=false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.cunt = 1
        this.onLoad();
      },

    },
    mounted() {
      document.body.style.backgroundColor = "#F7F7F9";
    },
    created() {
      this.userId = localStorage.getItem("userId") //获取访问id
      console.log(this.userId)
      if (sessionStorage.getItem("index_rank") != 3) {
        this.dwId = sessionStorage.getItem("tongji_2_id")
      }

    }
  }
</script>

<style scoped>
  /* 头部开始 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .btn-change {
    position: absolute;
    left: 1.537037rem;
    font-size: 0.488888rem !important;
    bottom: 0px;
    top: 0.15rem;
    width: auto !important;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  /* 头部结束 */
  .posi {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    top: 1.8519rem;
    width: 100%;
    background: #fff;
    z-index: 10;
  }

  .styles {
    display: inline-block;
    /* border: 1px solid blue; */
    width: 19.6%;
    font-size: 0.25rem;
    margin-bottom: 0.2rem;
  }

  .hdgd {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .hdgd div {
    display: inline-block;
  }

  .styles div {
    margin-top: 0.1rem;
  }

  .rvvee {
    width: 100%;
  }

  .stylebox {
    background: white;
    padding: 0.37037rem;
    box-sizing: border-box;
    /* border: 1px solid red; */
  }

  .img_log6 {
    width: 0.8rem;
    display: inline-block;
  }

  .img_people {
    width: 0.3519rem;
    margin-right: 0.2rem;
    height: 0.3519rem;
  }

  .xcbs_suns {
    width: 85%;
    /* border: 1px solid red; */
    margin-left: 0.3rem;
    margin-top: 0.15rem;
  }

  .xcbs_sun {
    display: flex;
    align-items: center;
    font-size: 0.296296rem;
    color: #999;
    margin-top: 0.092592rem;
  }

  .time {
    font-size: 0.35rem;
  }

  .xcbs_tit {
    font-size: 0.35rem;
    width: 100%;
    /* border: 1px solid red; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .img_persons {
    width: 0.6667rem;
    height: 0.7407rem;
  }

  .xcbs_child {
    /* border: 1px solid blue; */
    width: 85%;
    display: flex;
    align-items: center;
  }

  .listvr {
    margin-top: 0.2rem;
  }

  .xcbs_box {
    display: flex;
    justify-content: space-between;
    height: 1.388888rem;
    border-radius: 0.15rem;
    align-items: center;
    background-color: white;
    padding: 0 0.4rem;
  }

  .listvr_tit {
    border-radius: 0.15rem;
    padding: 0 0.4rem;
    height: 0.8rem;
    background-color: white;
    line-height: 0.8rem;
    border-bottom: 1px solid #DDDDDD;
  }



  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_big {
    width: 0.629629rem;
  }
  .yh_light{
    width: 0.37037rem !important;
    height: 0.37037rem !important;
    margin-right: 0.2rem;
  }
</style>
